<template>
    <div class="ui-starts">
        <span
        v-for="num in 5"
        :key="num"
        :class="[
        'iconfont icon-star',
        num <= startNum ?'active':''
        ]"
        :style="{fontSize : size + 'px'}"
        @click="setStartNum(num)"
        ></span>
    </div>
</template>
<script>
import { userStarts } from "@/components/manfigy/hooks";
export default {
    name:'Starts',
    props:{
        num:{
            type:Number,
            default:0
        },
        size:{
            type:Number,
            default:16
        }
    },
  //ctx 传递事件给使用方
  setup(props,ctx){
      const [startNum,setStartNum ]  = userStarts(props.num,()=>{
        ctx.emit('getStartnum',startNum.value)
      });
      return{ startNum , setStartNum };
  }
}
</script>
<style lang="scss" scoped>
    @font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_2453088_o95t9oveyb.eot?t=1617029156515'); /* IE9 */
    src: url('//at.alicdn.com/t/font_2453088_o95t9oveyb.eot?t=1617029156515#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPoAAsAAAAACDQAAAOaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEHINNATYCJAMMCwgABCAFhG0HNhsTB8iemjzZJBUGsxGMUJXoQYgFUa1lz87ePZIKAGn0hMLFOCCyZCMcWioPrCNkbl5d+/TEpraYBXNrDzzXS088DaK+TDx2Jib4Oozi2x+VADhmt04ukM1nrfvIpLcHjAJ+wSTtzAxEMOCY6VI8zxcuWYGRgBMcUDeOBjLgf5AX9B/GbiJoiM8hIChfFqbX0jUEDCywToAcOWwIGDImtqFa+Am34mgYuSHCH1w2D2CT/778aw74wXBCgK19O81WUPdV+vmn196UJUpAPJ0DME6BgloAC1mpdI1RR6laakFPpWkudlnCTBX1PLjIV7jwHx4YAokCKsMAKhWluSgxFiXqP1ly1U8pABdYcAUvAF166HRTjhCypbvMsHCbE1W2rDB0nR4avnFGX1/k5KekSbxbrQwP3xxXzT6rCkt3ItOSDb3NqsmDZNYyKuzBbDCQXyOjeZqK8LR1ZB4zIcNmsC4LI4E97ygXJqGQm1DuLof4OHFYZSbE2DR93SeUASMzI5UepoOHxpjnORKCdJdjOhrE4f5yBl2D/t1vbDz25F/7+ttHn3Wo2H4P9W0o4meu7Mfyr99mUoHk592X2YnLl2blaa5sJnxhvxyYzfPLvi6QmnkeVfv6K0GjatOciqLCgKpVlXOa32plobqjLsBBTjwpqMreLOTiGUkEa1RNjue5Hx9tVUYVTSQWsvl1fdoxG3UD/R1tTR+exhYmcirjGG2rajMtwfMxrykOpjUGhOr5P09pV9fYiJ+5RuWkg1UJ7vk2nZZXDwqaRYv/4bLWkgJQ3wpOA9PASj1XA0/oX3f/799wObr6vprr/C5lAXhdSpTygCdMt3KAn0Fn8d8UdxywvhSYNeyKsCj0qNmBDgNZYKr5h7UASR+HezJA4hB+UyzD8MmD8islWmotHCGtcPm1I6hG6+mQFEJNwgGg2o4EEfcAI+oaKu490VI/wJH1C654QBE0EihdGVIemDR1CUYUW6FlATokn1dGVmoS1QPYNuNGJC3lNAETxRGF+Tl5+Wwr9mIyxQ5l1lZAqQxl4vPAFuk17Hb7oJ/4nFiiOXZK/RW5uXLVh3IknweYdCMwhMKsIIsFkIPEx0um4ylT4ecHYDYz3BDS0NLjFWCEwjE5lC9HXgdiq8rbqeVW3lHMsilAUTJIRvh4QC2SA3PDlA/kr17khEmoHPYBCb8KucoouasqZ3mN5wUKjQ7AHg0YUbHYS4qIljjzAQAAAA==') format('woff2'),
    url('//at.alicdn.com/t/font_2453088_o95t9oveyb.woff?t=1617029156515') format('woff'),
    url('//at.alicdn.com/t/font_2453088_o95t9oveyb.ttf?t=1617029156515') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_2453088_o95t9oveyb.svg?t=1617029156515#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #999;
    &.icon-star{
        transition: color .3s;
    }
    &.icon-star:before {
    content: "\e6ee";
    }
    &.icon-star1:before {
    content: "\e613";
    }
    &.active{
        color: #FBAB06;
    }
    }
</style>
